<!--
 * @Description: 客诉历史
 * @Autor: 何兴家
 * @Date: 2020-11-20 09:22:16
 * @LastEditors: 马毅
 * @LastEditTime: 2021-06-29 15:36:25
-->
<template>
  <div>
    <FilterTable
      ref="table"
      columnsRef="repair_repairReception_precontractArrange_complainHistory"
      height="auto"
      :fetchapi="fetchapi"
      :dataSource="compList"
      :params="fetchParams"
      :columns="tableColumns"
      :onColumnsChange="columns => (this.tableColumns = columns)"
      :isSelectColumn="false"
      :onSyncTableData="handleSyncTableData"
    >
    </FilterTable>

    <!-- 详情 -->
    <BaseDialog :visible.sync="showDetailPanel" title="投诉单明细" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <detail @close="showDetailPanel = false" :formData="viewedRowData" />
    </BaseDialog>

    <div class="btnWrap">
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getcomplainbillforvin } from '@/api/repair/common';

import detail from './detail';

export default {
  props: ['vin'],
  components: { detail },
  data() {
    this.viewedRowData = {}; // 查看的行项数据
    return {
      tableColumns: this.createTableCloumns(),
      fetchapi: getcomplainbillforvin,
      fetchParams: { xhrAbort: true },
      compList: [],
      showDetailPanel: false // 是否显示查看详情弹窗
    };
  },
  mounted() {
    // this.fetchParams = { ...this.fetchParams, xhrAbort: false, vin: this.vin };
    this.getData(this.vin);
  },
  methods: {
    createTableCloumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: props => {
            return (
              <el-button
                type="text"
                onClick={() => {
                  this.handleDetailClick(props.row);
                }}
              >
                明细
              </el-button>
            );
          }
        },
        {
          title: '投诉编号',
          dataIndex: 'complaintNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主姓名',
          dataIndex: 'complaintName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'model',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '投诉类型',
          dataIndex: 'complaintType',
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: [
            { text: '产品', value: 'C' },
            { text: '销售', value: 'X' },
            { text: '电桩', value: 'D' },
            { text: '服务', value: 'F' },
            { text: '配件', value: 'P' }
          ]
        },
        {
          title: '业务分类',
          dataIndex: 'department',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '投诉渠道',
          dataIndex: 'complaintOrigin',
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: [
            { text: '报道', value: 'B' },
            { text: '电话', value: 'D' },
            { text: '监督机构', value: 'J' },
            { text: '网络', value: 'W' },
            { text: '现场投诉', value: 'X' }
          ]
        }
      ];
    },
    // 同步table数据函数
    handleSyncTableData(list) {
      list.map(item => {
        item.repairorderpolist.length && Object.assign(item, item.repairorderpolist[0]);
        item.tmVehicle.length && Object.assign(item, item.tmVehicle[0]);
      });
    },
    // 点击查看详情
    handleDetailClick(row) {
      this.viewedRowData = row;
      this.showDetailPanel = true;
    },
    handleCancel() {
      this.$emit('close');
    },
    async getData(vin) {
      let params = { vin: vin };
      let res = await getcomplainbillforvin(params);
      if (res.resultCode == 200) {
        this.compList = res.data;
      }
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
